import {Component, ReactNode} from 'react';
import React from 'react';
import {connect} from 'umi';
import KeywordFilterSearch from '@/components/KeywordFilterSearch';
import CreateForm from '@/pages/ListTableList/components/CreateForm';
// @ts-ignore
import UpdateForm, {FormValueType} from '@/pages/ListTableList/components/UpdateForm';
import ProTable, {RequestData} from '@ant-design/pro-table';
import {Row, Col, Pagination, Descriptions, Switch} from 'antd';
import './index.less';

interface TeachingManagerItem {
}

interface TeachingManagerProps {
  additionOptions?: Array<{ title: string; onClick: Function }>;
  toolBarRender?: () => Array<ReactNode> | false;
  rowKey?: string;
  handleAdd?: (item: any) => Promise<boolean>;
  handleDelete?: (id: number) => Promise<boolean>;
  handleUpdate?: (item: any) => Promise<boolean>;
  handleChangeState?: (state: boolean) => Promise<boolean>;
  requestGetData?: (
    params: {
      pageSize?: number;
      current?: number;
    },
    sort: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) => Promise<RequestData<TeachingManagerItem>>;
}

interface TeachingManagerState {
  selectedRowsState: Array<any>;
  createModalVisible: boolean;
  updateModalVisible: boolean;
  currentSelect: any;
  currentPage: number;
}

class TeachingManager extends Component<TeachingManagerProps, TeachingManagerState> {
  actionRef: any;

  constructor(props: TeachingManagerProps) {
    super(props);
    this.state = {
      selectedRowsState: [],
      createModalVisible: false,
      updateModalVisible: false,
      currentSelect: {},
      currentPage: 0,
    };
  }

  componentDidMount() {
  }

  onChange(page: number) {
    this.setState({
      currentPage: page,
    });
  }

  handleModalVisible(value: boolean) {
    this.setState({createModalVisible: value});
  }

  setSelectedRows(rows: Array<any>) {
  }

  handleRemove(array: Array<TeachingManagerItem>) {
  }

  handleAdd(item: TeachingManagerItem) {
    return false;
  }

  handleUpdateModalVisible(value: boolean) {
    this.setState({updateModalVisible: value});
  }

  handleUpdate(value: FormValueType) {
    return false;
  }

  render() {
    const datas = [0, 1, 2, 3, 4, 5, 6];
    return (
      <div>
        <KeywordFilterSearch
          filters={[
            {title: '角色类型', multiple: false, keywords: ['全部', '教务管理员', '教师']},
            {title: '课程标签', multiple: false, keywords: ['全部', '教务管理员', '教师']},
            {title: '课程状态', multiple: false, keywords: ['全部', '教务管理员', '教师']},
          ]}
        ></KeywordFilterSearch>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'flex-end',
            marginBottom: '12px',
          }}
        >
          {this.props.toolBarRender ? this.props.toolBarRender() : null}
        </div>
        {datas.map((item) => {
          return (
            <Row className="teaching-manager-item" gutter={16}>
              <Col xl={6} lg={6} md={8} sm={24} style={{height: '100%'}}>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    height: '100%',
                    flexDirection: 'column',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '90%',
                      objectFit: 'cover',
                    }}
                    src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                  />
                </div>
              </Col>
              <Col xl={18} lg={18} md={16} sm={24} style={{height: '100%'}}>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    height: '100%',
                    flexDirection: 'row',
                  }}
                >
                  <Descriptions className="container-horization-vertical-item" bordered size={'small'}
                                layout="horizontal" column={1}>
                    <Descriptions.Item label="课程名称:">Cloud Database</Descriptions.Item>
                    <Descriptions.Item label="课程类别:">Prepaid</Descriptions.Item>
                    <Descriptions.Item label="课程老师:">18:00:00</Descriptions.Item>
                    <Descriptions.Item label="开始时间:">$80.00</Descriptions.Item>
                    <Descriptions.Item label="结束时间:">$20.00</Descriptions.Item>
                    <Descriptions.Item label="项目人数:">$60.00</Descriptions.Item>
                  </Descriptions>
                  <div className="container-horization-vertical-item">
                    <Switch></Switch>
                  </div>
                </div>
              </Col>
            </Row>
          );
        })}
        <div
          style={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <Pagination
            current={this.state.currentPage}
            onChange={this.onChange.bind(this)}
            total={50}
          />
        </div>
        <CreateForm
          onCancel={() => this.handleModalVisible(false)}
          modalVisible={this.state.createModalVisible}
        >
          <ProTable<TeachingManagerItem, TeachingManagerItem>
            onSubmit={async (value) => {
              const success = await this.props.handleAdd?.(value);
              if (success) {
                this.handleModalVisible(false);
                if (this.actionRef) {
                  this.actionRef.reload();
                }
              }
            }}
            type="form"
            // columns={this.props.columns}
            rowSelection={{}}
          />
        </CreateForm>
        <UpdateForm
          onSubmit={async (value) => {
            const success = await this.handleUpdate(value);
            if (success) {
              this.handleUpdateModalVisible(false);
              if (this.actionRef.current) {
                this.actionRef.current.reload();
              }
            }
          }}
          onCancel={() => {
            this.handleUpdateModalVisible(false);
          }}
          updateModalVisible={this.state.updateModalVisible}
          values={this.state.currentSelect}
        />
      </div>
    );
  }
}

export default connect()(TeachingManager);
